.call-link{
    padding: 0px 20px;
    @borderColor:#e8e8e8;
    .border-right{
        border-right: 1px solid @borderColor;
    }
    .toolbar{
        width: 100%;
        padding: 20px;
        display: flex;
        cursor: pointer;
        justify-content: flex-end;
        >div{
            padding: 2px 8px;
            border: 1px solid #999;
        }
    }
    .call-link-title{
        margin: 0;
        padding: 5px;
    }
    .call-link-legend{
        display: flex;
        padding: 0px 10px;
        justify-content: space-between;
        >div:nth-child(1){
            height: 50px;
            display: flex;
            justify-content: space-between;
            >div{
                display: flex;
                height: 10px;
                justify-content: center;
                margin-left: 20px;
                margin-top: 20px;
                line-height: 10px;
                padding-left: 5px;
            }
            >div:nth-child(1){
                margin-left: 0px;
                border-left: 10px solid #9fd80c;
            }
            >div:nth-child(2){
                border-left: 10px solid #f39429;
            }
            >div:nth-child(3){
                border-left: 10px solid #f42624;
            }
        }
        >div:nth-child(2){
            display: flex;
            justify-content: space-between;
            >div{
                &:nth-child(1){
                    margin-right: 20px;
                }
                span{
                    width: 50px;
                    color: #999;
                }
            }
        }
    }

    // 调用链路-图标设计
    .call-link-table{
        position: relative;
        // 清楚默认效果
        .rowClassDefault{
            position: relative;
        }
        .rowClassActive{
            .rowClassDefault;
            background: #e6fffa;
        }
        .ant-table-content .ant-table-body{
            border-bottom: 1px solid @borderColor;
            .ant-table-thead, .ant-table-tbody{
                tr {
                    th, td{
                        padding: 0 !important;
                    }
                    td >span{
                        display: none !important;
                    }
                }
            }
        }
        // 辅助线
        .call-link-auxiliary-line{
            width: 60%;
            height: 100%;
            display: flex;
            border-bottom: 2px solid @borderColor;
            justify-content: flex-start;
            position: absolute;
            top: 0;
            right: 0;
            z-index: 1;
            >i{
                display: block;
                width: 1px;
                height: 100%;
                margin-left: 19.9%;
                background: @borderColor;
            }
        }
        // header
        .ant-table-header-column{
            width: 100%;
            .link-title-box{
                width: 100%;
                display: flex;
                justify-content: space-between;
                >div{
                    .border-right;
                    padding: 8px 10px;
                }
                .link-progress{
                    padding: 0px;
                    display: flex;
                    justify-content: space-between;
                    >div{
                        width: 20%;
                        display: flex;
                        color: #999;
                        font-size: 12px;
                        align-items: center;
                        padding: 0px 3px;
                        &:last-child{
                            display: flex;
                            justify-content: space-between;
                        }
                    }
                }
            }   
        }
        // body
        .link-box{
            width: 100%;
            display: flex;
            justify-content: space-between;
            position: relative;
            >div{
                padding: 16px;
                height: 51px;
                border-style: solid;
                border-color: @borderColor;
                border-width: 0;
                border-right-width: 1px;
                .link-item-name{
                    >.legend{
                        display: block;
                        width: 8px;
                        height: 50%;
                        position: absolute;
                        top: 13px;
                        left: 3.5%;
                    }
                    >span{
                        margin-left: 20px;
                        cursor: pointer;
                    }
                }
                &:last-child{
                    height: initial;
                    border-bottom: 0;
                    padding: 16px 0px 0px 0px;
                    .progress-bar{
                        width: 100%;
                        height: 18px;
                        position: relative;
                        >i{
                            height: 18px;
                            background: #eee;
                            display: flex;
                            color: #fff;
                            justify-content: space-between;
                            position: absolute;
                            top: 0;
                            left: 0;
                            z-index: 2;
                        }
                        .progress-bar-start-time{
                            margin-left: -55px;
                            color: #505E7C;
                        }
                        .progress-bar-end-time{
                            margin-right: -55px;
                            color: #505E7C;
                        }
                    }
                }
            }
        }

        // 链路详情
        .link-details{
            margin-top: 16px;
            min-height: 350px;
            position: relative;
            z-index: 2;
            .rowClassActive;
            .ant-descriptions-title{
                display: flex;
                justify-content: space-between;
                padding: 10px;
                background: #98e9d9;
                margin: 0;
                >span:last-child{
                    color: #9a9a9a;
                    font-weight: 500;
                    font-size: 12px;
                    line-height: 24px;
                }
            }
            .ant-descriptions-view{
                > div{
                    padding: 10px 5px;
                    color: #9a9a9a;
                    >span{
                        color: #505E7C;
                    }
                }
            }
        }
    }
}